<template>
	<view class="content">
		<form class="form" @submit="formSubmit">
			<view class="tel-wrap">
				<text class="iconfont iconfont1 icon-username"></text>
				<input name="tel" class="tel" focus placeholder="请输入手机号" />
			</view>
			<view class="psd-wrap">
				<text class="iconfont iconfont1 icon-password"></text>
				<input name="psd" class="psd" password placeholder="设置登录密码,不少于6位" />
			</view>
			<button formType="submit" class="next-btn" type="default">下一步</button>
		</form>
	</view>
</template>

<script>
	var graceChecker = require("../../common/graceChecker.js");
	import { baseUrl } from "../../common/config.js";
	export default {
		data() {
			return {
			}
		},
		methods: {
			formSubmit(e) {
				var rule = [
					{name:"tel", checkType : "phoneno", errorMsg:"手机号格式有误"},
					{name:"psd", checkType : "string", checkRule:"6,18",  errorMsg:"密码长度6到18位"}
				];
				var formData = e.detail.value;
				var checkRes = graceChecker.check(formData, rule);
				if(checkRes){
					this.$request('/captch/sent', {
						phone: formData.tel
					}).then((res) => {
						uni.navigateTo({
							url: `/pages/login/checkcode?tel=${formData.tel}&psd=${formData.psd}`
						})
					})
				}else{
					uni.showToast({ title: graceChecker.error, icon: "none" });
				}
			}
		}
	}
</script>

<style lang="scss">
	page, .content{
		width: 100%;
		height: 100%;
	}
	.content {
		background: url("../../static/imgs/login/login-background1.png") no-repeat;
		background-size: cover;
		.form{
			display: block;
			padding-top: 40upx;
		}
		.tel-wrap, .psd-wrap {
			width: 80%;
			margin: 0 auto;
			position: relative;
			height: 100upx;
			border-bottom: 1upx solid #eee;
			.iconfont {
				position: absolute;
				left: 0;
				top: 30upx;
				font-size: 48upx;
			}
			input{
				padding-left: 100upx;
				padding-top: 28upx;
				font-size: 36upx;
			}
		}
		.tel-wrap{
			margin-bottom: 20upx;
		}
		.psd-wrap{
			margin-bottom: 80upx;
		}
		.next-btn{
			width: 80%;
			margin: 0 auto 40upx;
			background: #ff2d2d;
			border-radius: 80upx;
			color: #fff;
			font-size: 32upx;
		}
	}
</style>
